用vue做完项目的一些用法，技巧总结（很实用）

头像
王大冶
    阅读 7 分钟
    18

    一.vue.js 添加 fastclick的支持

    fastclick：处理移动端click事件300毫秒延迟

    1) 安装

    npm install fastclick -S

    2) 引入

    之后，在main.js中引入，并绑定到body

    import FastClick from 'fastclick

FastClick.attach(document.body);

    二.引用border.css解决1px边框问题，以为是border.css代码，如果有需要可以加我扣扣(449245882):

    1) boder.css

    @charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
    position: relative;
 }
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,

.border-bottomleft::after {
    content: "\0020";
    overflow: hidden;
    position: absolute;
}

/* border
 * 因，边框是由伪元素区域遮盖在父级
 * 故，子级若有交互，需要对子级设置
 * 定位 及 z轴
 */
 
 .border::before {
    box-sizing: border-box;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 1px solid #eaeaea;
    transform-origin: 0 0;
}

.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
    left: 0;
    width: 100%;
    height: 1px;
}

.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
    top: 0;
    width: 1px;
    height: 100%;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
    border-top: 1px solid #eaeaea;
    transform-origin: 0 0;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
    border-right: 1px solid #eaeaea;
    transform-origin: 100% 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
    border-bottom: 1px solid #eaeaea;
    transform-origin: 0 100%;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
    border-left: 1px solid #eaeaea;
    transform-origin: 0 0;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
    top: 0;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
    right: 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
    bottom: 0;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
    left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
    /* 默认值，无需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
    .border::before {
        width: 200%;
        height: 200%;
        transform: scale(.5);
    }
    .border-top::before,
    .border-bottom::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-topleft::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-bottomleft::before {
        transform: scaleY(.5);
    }
    .border-right::before,
    .border-left::before,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-topright::after,
    .border-bottomleft::after {
        transform: scaleX(.5);
    }
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
    .border::before {
        width: 300%;
        height: 300%;
        transform: scale(.33333);
    }
    .border-top::before,
    .border-bottom::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-topleft::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-bottomleft::before {
        transform: scaleY(.33333);
    }
    .border-right::before,
    .border-left::before,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-topright::after,
    .border-bottomleft::after {
        transform: scaleX(.33333);
    }
}

    2) 使用方法

    比如需要在 div 上加上一个底部1px的边框，可以这样写

    <div class="borter-bottom">

    对应其它的边框，可以查看css编写。

    三.给路径加别名

    当项目比较复杂，文件层级多的时候，我们引入文件可能需要这样写:

    import "../../../../components"

    这样写其实很不方便的，也不好定位，vue 给我们提供别，首先设置别名是在webpack.base.conf.js 的文件中设置。找到

    resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'components': resolve('src/components')
    }
  },

    设置的时候就可以写成我上面的 resolve('src/components') 。在引入这个文件下面的文件时，直接components/**就可以了。

    但对于样式的图片的别名，如下代码

    alias: {
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components')
}

<template>
  <img src="assets/images/logo.jpg" />
</template>
<script>
import 'assets/css/style.css'
</script>
<style>
.logo {
  background: url(asset/images/bg.jpg)
}
</style>

    上面的代码, 你会发现只有引入style.css是成功的, 图片地址和背景图片地址都会解析失。

    经过各种搜索找原因(这时候, 你会发现百度搜索这些技术型的内容, 真是垃圾中的战斗机), 最终还是找到原因了...
    vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~
    就是要在别名前面加一个~

    最终代码写成:

    alias: {
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components')
}
<template>
    <img src="~assets/images/logo.jpg" />
</template>
<script>
import 'assets/css/style.css'
</script>
<style>
.logo {
    background: url(~asset/images/bg.jpg)
}
</style>

    意思就是: 告诉加载器它是一个模块，而不是相对路径

    注意: 只有在template中的静态文件地址和style中的静态文件地址需要加~, 在script里的, 别名定义成什么就写什么

    四.使用 keep-alive 优化体验

    为了增加用户体验，我们可以使用 keep-alive 来进行页面的缓存，如

    <keep-alive >
  <router-view/>
</keep-alive>

    但有时候我们可能要针对某个页面缓存或者不缓存，我们可以使用vue 提供的两个属性

    include - 字符串或正则表达式。只有匹配的组件会被缓存。
    exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。
    <!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

    匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

    五.router-link tag用法

    <ul>
    <li>子item</li>
    <li>子item</li>
    <li>子item</li>
</ul>

    如上，假如我们需求是点击Li 标签进行跳转，我们可能就会在li 标签上注册一个点击事件，用js时行动态跳转，但假如我们只在li时行跳转呢？你可能会想到 router-link ，但是ul 下只能是 li标签，这时 router-link 就提供了一个 tag 属性，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。

    <router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>
    愿你成为终身学习者
    vue.js
    王大冶
    68k 声望104.9k 粉丝
    « 上一篇
    前端面试之webpack面试常见问题
    下一篇 »
    使用mpvue开发小程序需要注意和了解的知识点

    引用和评论

    推荐阅读
    头像
    Vite 6.0 发布：引领现代前端开发新方向

    王大冶

    头像
    前端开发工具

    寒青赞 16阅读 4.8k

    头像
    开发插件集合

    寒青赞 12阅读 3.2k

    头像
    2024最全ECharts 实战大全（速记版+资源）

    程序员海军赞 7阅读 209

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.3k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 616评论 1

    0 条评论
    得票最新